<script setup>
import { onMounted, ref } from 'vue'
import { getUserApi } from '@/api/user'

const res = ref(null)
const showPreview = ref(false) //是否显示预览图片
const previewImageUrl = ref('') //预览图片地址
let hour = ''
let minute = ''
//从item里面解构msg，id
const props = defineProps({
  item: {
    type: Object,
  },
  avatarUrl: {
    type: String,
  },
})

// 打开图片预览
const openPreview = (url) => {
  previewImageUrl.value = url
  showPreview.value = true
}

// 关闭图片预览
const closePreview = () => {
  showPreview.value = false
}

onMounted(async () => {
  res.value = await getUserApi(Number(props.item.id))

  if (props.item.sentTime) {
    hour = props.item.sentTime.split('T')[1].split(':')[0]
    minute = props.item.sentTime.split('T')[1].split(':')[1]
  }
})
</script>

<template>
  <div class="time">{{ hour }}:{{ minute }}</div>
  <div class="receive-box">
    <div class="avatar"><img :src="props.avatarUrl" /></div>
    <div class="main">
      <div class="name">{{ res ? res.data.data.username : '' }}</div>
      <div class="content">
        <div class="text" v-if="props.item.content">{{ props.item.content }}</div>
        <div class="img" v-else-if="props.item.imageUrl">
          <img @click="openPreview(props.item.imageUrl)" :src="props.item.imageUrl" />
        </div>
        <div class="video" v-else>
          <!--mp4播放器-->
          <video
            controls
            type="video/mp4"
            style="width: 200px; height: 200px"
            :src="props.item.videoUrl"
            autoplay
          ></video>
        </div>
      </div>
    </div>

    <!-- 图片预览模态框 -->
    <div v-if="showPreview" class="image-preview-modal" @click.self="closePreview">
      <div class="preview-content">
        <img :src="previewImageUrl" class="preview-image" />
        <button class="close-btn" @click="closePreview">×</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .preview-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;

    .preview-image {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
    }

    .close-btn {
      position: absolute;
      top: -40px;
      right: 0;
      background: none;
      border: none;
      color: white;
      font-size: 30px;
      cursor: pointer;
      padding: 5px 10px;

      &:hover {
        color: #ccc;
      }
    }
  }
}
.time {
  text-align: center;
  font-size: 12px;
  color: rgb(193, 193, 193);
}
.receive-box {
  direction: rtl;
  display: flex;

  .avatar {
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .main {
    margin-right: 5px;
    .name {
      font-size: 14px;
      color: rgb(178, 178, 178);
      margin-bottom: 5px;
    }
    .content {
      direction: ltr;
      display: flex;
      justify-content: center;

      align-items: center;
      font-size: 14px;
      color: rgb(102, 102, 102);

      .text {
        white-space: pre-wrap; //保留空格和换行，自动换行
        word-wrap: break-word; //自动换行
        overflow: hidden; //超出部分隐藏
      }
      width: auto;
      max-width: 250px;
      min-height: 35px;
      height: auto;
      max-height: 1000px;

      border-radius: 10px;
      background-color: rgb(255, 255, 255);
      .img {
        height: 100%;
        width: 100%;

        img {
          max-width: 100%; // 限制最大宽度
          height: 100%;
          object-fit: contain; // 保持比例
          cursor: pointer; // 添加指针光标表示可点击
          transition: transform 0.2s; // 添加悬停效果
          &:hover {
            transform: scale(1.02); // 悬停时轻微放大
          }
        }
      }
    }
  }
}
</style>
